<template>
  <view class="chart-container">
    <canvas
      canvas-id="timeCurveCanvas"
      :style="{ width: width + 'px', height: height + 'px' }"
    ></canvas>
  </view>
</template>

<script>
export default {
  name: "TimeCurveChart",
  props: {
    width: { type: Number, default: 340 },
    height: { type: Number, default: 240 },
    data: {
      type: Array,
      default: () => [
        { time: "08:00", value: 90 },
        { time: "10:00", value: 100 },
        { time: "12:00", value: 80 },
        { time: "14:00", value: 110 },
        { time: "16:00", value: 95 }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => this.drawChart(), 50)
    })
  },
  methods: {
    drawDashedLine(ctx, x1, y1, x2, y2, dashLength = 4) {
      const deltaX = x2 - x1
      const deltaY = y2 - y1
      const numDashes = Math.floor(Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength)
      for (let i = 0; i < numDashes; i += 2) {
        const startX = x1 + (deltaX * i) / numDashes
        const startY = y1 + (deltaY * i) / numDashes
        const endX = x1 + (deltaX * (i + 1)) / numDashes
        const endY = y1 + (deltaY * (i + 1)) / numDashes
        ctx.moveTo(startX, startY)
        ctx.lineTo(endX, endY)
      }
      ctx.stroke()
    },
    drawChart() {
      const ctx = uni.createCanvasContext('timeCurveCanvas', this)
      if (!ctx) return

      const screenWidth = uni.getSystemInfoSync().screenWidth
      const rpxToPx = (rpx) => (rpx / 750) * screenWidth

      const padding = 40
      const yTextMargin = rpxToPx(32)
      const chartWidth = this.width - padding * 2
      const chartHeight = this.height - padding * 2

      const values = this.data.map(i => i.value)
      const times = this.data.map(i => i.time)
      const minVal = Math.min(...values)
      const maxVal = Math.max(...values)
      const stepX = chartWidth / (values.length - 1)

      // 清空画布
      ctx.clearRect(0, 0, this.width, this.height)

      // ===== Y轴文字 & 网格虚线 =====
      ctx.setFontSize(12)
      ctx.setFillStyle('#666')
      ctx.setStrokeStyle('#eee')
      ctx.setLineWidth(1)
      for (let i = 0; i <= 4; i++) {
        const val = minVal + ((maxVal - minVal) / 4) * i
        const y = this.height - padding - (chartHeight / 4) * i

        // 虚线网格
        ctx.beginPath()
        this.drawDashedLine(ctx, padding, y, this.width - padding, y, 4)

        // Y轴文字
        ctx.fillText(val.toFixed(0), yTextMargin, y + 4)
      }

      // ===== X轴虚线 =====
      ctx.setStrokeStyle('#ccc')
      ctx.setLineWidth(1)
      ctx.beginPath()
      this.drawDashedLine(ctx, padding, this.height - padding, this.width - padding, this.height - padding, 4)

      // X刻度文字
      ctx.setFillStyle('#666')
      times.forEach((t, i) => {
        const x = padding + stepX * i
        ctx.fillText(t, x - 10, this.height - padding + 20)
      })

      // ===== 曲线点 =====
      const points = values.map((v, i) => {
        const x = padding + stepX * i
        const y = this.height - padding - ((v - minVal) / (maxVal - minVal)) * chartHeight
        return { x, y }
      })

      // ===== 平滑曲线 =====
      ctx.beginPath()
      ctx.moveTo(points[0].x, points[0].y)
      for (let i = 0; i < points.length - 1; i++) {
        const ctrlX = (points[i].x + points[i + 1].x) / 2
        const ctrlY = (points[i].y + points[i + 1].y) / 2
        ctx.quadraticCurveTo(points[i].x, points[i].y, ctrlX, ctrlY)
      }
      ctx.setStrokeStyle('#36B3E9')
      ctx.setLineWidth(2)
      ctx.stroke()

      // ===== 渐变填充 =====
      ctx.lineTo(points[points.length - 1].x, this.height - padding)
      ctx.lineTo(points[0].x, this.height - padding)
      ctx.closePath()
      const gradient = ctx.createLinearGradient(0, padding, 0, this.height - padding)
      gradient.addColorStop(0, 'rgba(54,179,233,0.4)')
      gradient.addColorStop(1, 'rgba(255,255,255,0)')
      ctx.setFillStyle(gradient)
      ctx.fill()

      // 渲染
      ctx.draw()
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 10rpx;
}
canvas {
  display: block;
}
</style>
